<template>
    <div class="map-area" id="allmap" :id="mapId"></div>
</template>
<script>

    import { loadBdMap } from "@/api/loadBMap";
    export default {
        name: 'bdmap',
        props: ['mapArrayProps'],
        data() {
            return {
                ak: 'exr110xo0sNiGM1swXWhqVZix17T2xT6',
                mapId: 'BMap-allmap',
                myMap: null,
                point: "",
                center: {lng: 117.000923, lat:  36.675807},
                zoom: 13,
                markerArr: this.mapArrayProps,
                list: '<dt>洗车机列表</dt>',
                mapStyle:''
            }
        },
        watch: {
        },
        mounted() {
            this.initBaiduMap()
        },
        methods: {
            initBaiduMap() {
                loadBdMap(this.ak).then(() => {
                    // 创建Map实例
                    this.myMap = new BMap.Map(this.mapId)
                    //第1步：设置地图中心点，济南市
                    this.point = new BMap.Point(117.000923, 36.675807)
                    // 第2步 初始化地图,设置中心点坐标和地图级别
                    this.myMap.centerAndZoom(this.point, 13)
                    //第3步：启用滚轮放大缩小
                    this.myMap.enableScrollWheelZoom(true);
                    //第4步：向地图中添加缩放控件
                    var ctrlNav = new window.BMap.NavigationControl({
                        anchor: BMAP_ANCHOR_TOP_LEFT,
                        type: BMAP_NAVIGATION_CONTROL_LARGE
                    });
                    this.myMap.addControl(ctrlNav);
                    //第5步：向地图中添加缩略图控件
                    var ctrlOve = new window.BMap.OverviewMapControl({
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                        isOpen: 1
                    });
                    this.myMap.addControl(ctrlOve);

                    //第6步：向地图中添加比例尺控件
                    var ctrlSca = new window.BMap.ScaleControl({
                        anchor: BMAP_ANCHOR_BOTTOM_LEFT
                    });
                    this.myMap.addControl(ctrlSca);
                    console.log(this.markerArr)
                    for (var i = 0; i < this.markerArr.length; i++) {
                        var p0 = this.markerArr[i].point.split(",")[0];
                        var p1 = this.markerArr[i].point.split(",")[1];
                        var state = this.markerArr[i].status;
                        var maker = this.addMarker(new window.BMap.Point(p0, p1), 'i', state);
                        this.addInfoWindow(maker, this.markerArr[i], i);
                    }
                }).catch(err => {
                    console.log('地图加载失败')
                })
            },
            BaiduMap() {
                this.map = new BMap.Map("allmap");
                //第1步：设置地图中心点，济南市
                this.point = new BMap.Point(117.000923, 36.675807)
                //第2步：初始化地图,设置中心点坐标和地图级别。
                map.centerAndZoom(this.point, 13)
                //第3步：启用滚轮放大缩小
                map.enableScrollWheelZoom(true);
                //第4步：向地图中添加缩放控件
                var ctrlNav = new window.BMap.NavigationControl({
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    type: BMAP_NAVIGATION_CONTROL_LARGE
                });
                map.addControl(ctrlNav);
                //第5步：向地图中添加缩略图控件
                var ctrlOve = new window.BMap.OverviewMapControl({
                    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                    isOpen: 1
                });
                map.addControl(ctrlOve);

                //第6步：向地图中添加比例尺控件
                var ctrlSca = new window.BMap.ScaleControl({
                    anchor: BMAP_ANCHOR_BOTTOM_LEFT
                });
                map.addControl(ctrlSca);
                for (var i = 0; i < this.markerArr.length; i++) {
                    var p0 = this.markerArr[i].point.split(",")[0];
                    var p1 = this.markerArr[i].point.split(",")[1];
                    var state = this.markerArr[i].status;
                    var maker = this.addMarker(new window.BMap.Point(p0, p1), 'i', state);
                    this.addInfoWindow(maker, this.markerArr[i], i);
                }

            },
            //添加标注
            addMarker(point, index, state) {
                var src = "";
                if (state == "1") {
                    src = "/static/images/greencar.ico";
                } else {
                    src = "/static/images/browncar.ico";
                }
                var myIcon = new BMap.Icon(src, new BMap.Size(48, 48));

                var marker = new BMap.Marker(point, {
                    icon: myIcon
                });
                this.myMap.addOverlay(marker);
                return marker;
            },
            addInfoWindow(marker, poi) {
                // 信息窗口
                var infoWindow = this.getInfoWin(poi.status, poi.title, poi.address);
                var openInfoWinFun = function () {
                    marker.openInfoWindow(infoWindow);
                };
                marker.addEventListener("click", openInfoWinFun);
                return openInfoWinFun;
            },
            getInfoWin(status, title, address) {
                var state;
                if (status == 1) {
                    state = '<span style="color:#009688"><i class="iconfont">&#xe63c;</i>（在线）</span>';
                } else {
                    state = '<span style="color:#c2c2c2"><i class="iconfont">&#xe6e0;</i>（离线）</span>';
                }
                //pop弹窗标题
                var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + title + state + '</div>';
                //pop弹窗信息
                var html = [];
                html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
                html.push('<tr>');
                html.push(
                    '<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
                html.push('<td style="vertical-align:top;line-height:16px">' + address + ' </td>');
                html.push('</tr>');
                html.push('</tbody></table>');

                var infoWindow = new BMap.InfoWindow(html.join(""), {
                    title: title,
                    width: 200
                });
                return infoWindow;
            },

            getClickInfo(e) {
                console.log(e.point.lng)
                console.log(e.point.lat)
                this.center.lng = e.point.lng
                this.center.lat = e.point.lat
            }
        },
        // methods: {
        //     initMap() {
        //
        //     },
        //     handler() {
        //         console.log(this.mapArrays)
        //         console.log('66666666666666')
        //         this.map = new BMap.Map("map");
        //         var point = new BMap.Point(117.000923, 36.675807);
        //         //第2步：初始化地图,设置中心点坐标和地图级别。
        //         this.map.centerAndZoom(point, 12);
        //         //第3步：启用滚轮放大缩小
        //         this.map.enableScrollWheelZoom(true);
        //         //第4步：向地图中添加缩放控件
        //         var ctrlNav = new window.BMap.NavigationControl({
        //             anchor: BMAP_ANCHOR_TOP_LEFT,
        //             type: BMAP_NAVIGATION_CONTROL_LARGE
        //         });
        //         this.map.addControl(ctrlNav);
        //         //第5步：向地图中添加缩略图控件
        //         var ctrlOve = new window.BMap.OverviewMapControl({
        //             anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        //             isOpen: 1
        //         });
        //         this.map.addControl(ctrlOve);
        //         //第6步：向地图中添加比例尺控件
        //         var ctrlSca = new window.BMap.ScaleControl({
        //             anchor: BMAP_ANCHOR_BOTTOM_LEFT
        //         });
        //
        //         this.list = '<dt>洗车机列表</dt>';
        //         //第7步：绘制点
        //         for (var i = 0; i < this.mapArrays.length; i++) {
        //             var p0 = this.mapArrays[i].point.split(",")[0];
        //             var p1 = this.mapArrays[i].point.split(",")[1];
        //             var state = this.mapArrays[i].status;
        //
        //             var maker = this.addMarker(new window.BMap.Point(p0, p1), 'i', state);
        //             this.addInfoWindow(maker, this.mapArrays[i], i);
        //             if (state == "1") {
        //                 this.list += '<dd><a href="javascript:to(' + i + ');"><img src="__STATIC__/admin/images/greencar.ico">' + this.mapArrays[i].title + '（在线）</a></dd>';
        //             } else {
        //                 this.list += '<dd><a href="javascript:to(' + i + ');"><img src="__STATIC__/admin/images/browncar.ico">' + this.markerArr[i].title + '（离线）</a></dd>';
        //             }
        //         }
        //         $(".washer-list").html(this.list);
        //
        //     },
        //     //添加标注
        //     addMarker(point, index, state) {
        //         var src = "";
        //         if (state == "1") {
        //             src = "__STATIC__/admin/images/greencar.ico";
        //         } else {
        //             src = "__STATIC__/admin/images/browncar.ico";
        //         }
        //         var myIcon = new BMap.Icon(src, new BMap.Size(48, 48));
        //
        //         var marker = new BMap.Marker(point, {
        //             icon: myIcon
        //         });
        //         this.map.addOverlay(marker);
        //         return marker;
        //     },
        //     addInfoWindow(marker, poi) {
        //         // 信息窗口
        //         var infoWindow = getInfoWin(poi.status, poi.title, poi.address);
        //         var openInfoWinFun = function () {
        //             marker.openInfoWindow(infoWindow);
        //         };
        //         marker.addEventListener("click", openInfoWinFun);
        //         return openInfoWinFun;
        //     },
        //     getInfoWin(status, title, address) {
        //         var state;
        //         if (status == 1) {
        //             state = '<span style="color:#009688"><i class="iconfont">&#xe63c;</i>（在线）</span>';
        //         } else {
        //             state = '<span style="color:#c2c2c2"><i class="iconfont">&#xe6e0;</i>（离线）</span>';
        //         }
        //         //pop弹窗标题
        //         var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + title + state + '</div>';
        //         //pop弹窗信息
        //         var html = [];
        //         html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
        //         html.push('<tr>');
        //         html.push(
        //             '<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
        //         html.push('<td style="vertical-align:top;line-height:16px">' + address + ' </td>');
        //         html.push('</tr>');
        //         html.push('</tbody></table>');
        //
        //         var infoWindow = new BMap.InfoWindow(html.join(""), {
        //             title: title,
        //             width: 200
        //         });
        //         return infoWindow;
        //     },
        //     getClickInfo(e) {
        //         console.log(e.point.lng)
        //         console.log(e.point.lat)
        //         this.center.lng = e.point.lng
        //         this.center.lat = e.point.lat
        //     }
        // }
    }
</script>

<style scoped>
    .map-area {
        width: 100%;
        height: 500px;
    }
</style>